<template>
  <view v-if="showPopup" class="uni-popup-wrap" @touchmove.stop.prevent="clear">
    <view
      class="uni-popup__mask"
      :class="[ani + '-mask', animation ? 'mask-ani' : '']"
      @click="close(true)"
    />
    <view
      class="uni-popup__wrapper"
      :class="[type, ani + '-content', animation ? 'content-ani' : '']"
      @click="close(true)"
    >
      <view class="uni-popup__wrapper-box" @click.stop="clear">
        <slot />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'u-popup',
  props: {
    // 开启动画
    animation: {
      type: Boolean,
      default: true,
    },
    // 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层；right: 右部弹出层
    type: {
      type: String,
      default: 'center',
    },
    // maskClick
    maskClick: {
      type: Boolean,
      default: true,
    },
    show: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      ani: '',
      showPopup: false,
    };
  },
  watch: {
    show(newValue) {
      if (newValue) {
        this.open();
      } else {
        this.close();
      }
    },
  },
  created() {
    // this.open()
  },
  methods: {
    clear() {},
    open() {
      this.$emit('open');
      this.showPopup = true;
      this.$nextTick(() => {
        setTimeout(() => {
          this.ani = `uni-${this.type}`;
        }, 100);
      });
    },
    close(type) {
      if (!this.maskClick && type) return;
      this.$emit('close');
      this.ani = '';
      this.$nextTick(() => {
        setTimeout(() => {
          this.showPopup = false;
        }, 300);
      });
    },
  },
};
</script>
<style lang="less">
.uni-popup-wrap {
  position: fixed;
  /* #ifdef H5 */
  top: var(--window-top);
  /* #endif */
  /* #ifndef H5 */
  top: 0;
  /* #endif */
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  overflow: hidden;

  .uni-popup__mask {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.7); //遮罩颜色
    opacity: 0;
  }

  .mask-ani {
    transition-property: opacity;
    transition-duration: 0.2s;
  }
  
  .uni-right-mask {
    opacity: 1;
  }
  
  .uni-top-mask {
    opacity: 1;
  }

  .uni-bottom-mask {
    opacity: 1;
  }

  .uni-center-mask {
    opacity: 1;
  }

  .uni-popup__wrapper {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    position: absolute;
  }

  .right{
    top: 0;
    bottom: 0;
    right: 0;
    transform: translateX(500px);
  }

  .top {
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-500px);
  }

  .bottom {
    bottom: 0;
    left: 0;
    right: 0;
    transform: translateY(600px); //默认最大高度，超出会出现卡顿情况，就再加
  }

  .center {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-direction: column;
    /* #endif */
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    transform: scale(1.2);
    opacity: 0;
  }

  .uni-popup__wrapper-box {
    /* #ifndef APP-NVUE */
    display: block;
    /* #endif */
    position: relative;
  }

  .content-ani {
    // transition: transform 0.3s;
    transition-property: transform, opacity;
    transition-duration: 0.2s;
  }

  .uni-right-content {
    transform: translateX(0);
  }

  .uni-top-content {
    transform: translateY(0);
  }

  .uni-bottom-content {
    transform: translateY(0);
  }

  .uni-center-content {
    transform: scale(1);
    opacity: 1;
  }
}
</style>
